import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import {
  Badge,
  Button,
  Card, Drawer,
  Form,
  Grid,
  Tooltip,
  Input, Modal,
  Notification,
  PaginationProps,
  Popconfirm,
  Select,
  Space,
  Steps,
  Table,
  TreeSelect,
  Typography
} from '@arco-design/web-react';
import {
  IconCommon,
  IconDelete,
  IconEdit,
  IconPlus,
  IconRefresh,
  IconRobot,
  IconSearch, IconThunderbolt,
  IconTool
} from '@arco-design/web-react/icon';
import useLocale from '@/utils/useLocale';
import instance from '@/utils/request';
import { convertToSelectOptions, resolveEnabledName } from '@/constants/functions';
import {
  EnabledOptions,
  ParameterAbilityOptions,
  ParameterDataTypeOptions,
  ParameterValueTypeOptions
} from '@/constants/options';
import { EditMode } from '@/constants/enums';
import { defaultDrawerLayout, defaultDrawerWidth, defaultPaginationProps } from '@/constants/defaults';
import { TreeSelectDataType } from '@arco-design/web-react/es/TreeSelect/interface';
import { DeviceResponse, DictResponse, ModelResponse, StructureResponse } from '@/constants/type';

const { Row, Col } = Grid;
const locale = {
  'en-US': {},
  'zh-CN': {
    'title.create': '创建设备',
    'title.update': '修改设备',

    'label.id': 'ID',
    'label.name': '设备名称',
    'label.code': '设备编码',
    'label.dataType': '数据类型',
    'label.valueType': '值类型',
    'label.type': '设备类型',
    'label.model': '关联模型',
    'label.structure': '关联工厂结构',
    'label.parameter': '关联参数',
    'label.enabled': '状态',
    'label.parentId': '父级设备',
    'label.remark': '备注',

    'placeholder.id': '请输入设备ID',
    'placeholder.name': '请输入设备名称',
    'placeholder.code': '请输入设备编码',
    'placeholder.dataType': '请选择数据类型',
    'placeholder.valueType': '请选择值类型',
    'placeholder.type': '请选择设备类型',
    'placeholder.model': '请选择关联模型',
    'placeholder.structure': '请选择关联工厂结构',
    'placeholder.parameter': '请选择关联参数',
    'placeholder.enabled': '请选择状态',
    'placeholder.parentId': '请输入设备父级设备',
    'placeholder.remark': '请输入设备备注',

    'columns.id': 'ID',
    'columns.name': '设备名称',
    'columns.code': '设备编码',
    'columns.dataType': '数据类型',
    'columns.valueType': '值类型',
    'columns.type': '设备类型',
    'columns.model': '物模型',
    'columns.structure': '工厂结构',
    'columns.parentId': '父级设备',
    'columns.remark': '设备备注',
    'columns.enabled': '状态',
    'columns.operations': '操作',

    'button.search': '搜索',
    'button.reset': '重置',
    'button.create': '创建',
    'button.update': '编辑',
    'button.config.alarm': '报警配置',
    'button.config.oee': 'OEE配置',
    'button.config.utilization': '稼动率配置',
    'button.delete': '删除',
    'button.auto_config_exist': '当前已经关联物模型，继续将会清空之前的所有配置，确认继续吗？',
    'button.auto_config_not_exist': '当前未关联物模型，继续配置将会创建新的物模型，确认继续吗？',
    'button.download': '下载设备',
    'button.auto_config': '自动配置',
    'button.auto_config.confirm': '确认要自动配置吗',

    'stepForm.model.title': '物模型信息',
    'stepForm.model.title.description': '输入物模型信息',
    'stepForm.parameter.title': '参数信息',
    'stepForm.parameter.title.description': '输入参数信息',
    'stepForm.title.created': '完成',
    'stepForm.desc.created': '提交',
    'stepForm.prev': '上一步',
    'stepForm.next': '下一步',
    'stepForm.submit': '提交',
    'label.parameter.public': '关联公共参数',
    'label.parameter.public.placeholder': '请选择关联公共参数',
    'label.parameter.private': '关联私有参数',
    'label.parameter.private.add': '创建私有参数',
    'label.parameter.private.placeholder': '请选择关联私有参数',
    'label.parameter.name': '名称',
    'label.parameter.name.placeholder': '请输入参数名称',
    'label.parameter.code': '编码',
    'label.parameter.code.placeholder': '请输入参数编码',
    'label.parameter.dataType': '数据类型',
    'label.parameter.dataType.placeholder': '请选择数据类型',
    'label.parameter.valueType': '值类型',
    'label.parameter.abilities': '能力',
    'label.parameter.abilities.placeholder': '请输入参数能力',
    'label.parameter.unit': '单位',
    'label.parameter.unit.placeholder': '请输入参数单位',
    'label.parameter.enabled': '启用',
    'label.parameter.enabled.placeholder': '请选择是否启用',
    'label.parameter.valueType.placeholder': '请选择值类型'

  }
};

const SearchForm = (props: {
  onSubmit: ({}) => void,
  onReset: () => void,
}) => {
  const t = useLocale(locale);
  const [form] = Form.useForm();
  const [typeOptions, setTypeOptions] = useState<TreeSelectDataType[]>([]);

  function fetchTypeData() {
    instance
      .post('/api/dict/list', {
        query: {
          type: 'DEVICE_TYPE'
        }
      })
      .then((res) => {
        if (res.data.code === 200) {
          setTypeOptions(convertToSelectOptions(res.data.data));
        }
      });
  }

  useEffect(() => {
    fetchTypeData();
  }, []);

  return (
    <Form form={form} style={{ padding: '1rem', background: 'white' }}>
      <Row style={{ display: 'flex' }}>
        <Grid style={{ flexGrow: '1' }} cols={4} colGap={12} rowGap={16}>
          <Grid.GridItem>
            <Form.Item noStyle label={t['label.id']} field="id">
              <Input placeholder={t['placeholder.id']} allowClear />
            </Form.Item>
          </Grid.GridItem>
          <Grid.GridItem>
            <Form.Item noStyle label={t['label.name']} field="name">
              <Input allowClear placeholder={t['placeholder.name']} />
            </Form.Item>
          </Grid.GridItem>
          <Grid.GridItem>
            <Form.Item noStyle label={t['label.code']} field="code">
              <Input allowClear placeholder={t['placeholder.code']} />
            </Form.Item>
          </Grid.GridItem>
          <Grid.GridItem>
            <Form.Item noStyle label={t['label.type']} field="typeId">
              <TreeSelect
                placeholder={t['placeholder.type']}
                treeData={typeOptions}
                allowClear
              />
            </Form.Item>
          </Grid.GridItem>
          <Grid.GridItem>
            <Form.Item noStyle label={t['label.remark']} field="remark">
              <Input allowClear placeholder={t['placeholder.remark']} />
            </Form.Item>
          </Grid.GridItem>
          <Grid.GridItem>
            <Form.Item noStyle label={t['label.enabled']} field="enabled">
              <Select
                placeholder={t['placeholder.enabled']}
                options={EnabledOptions}
                allowClear
              />
            </Form.Item>
          </Grid.GridItem>
        </Grid>
        <Row style={{ display: 'inline-flex', marginLeft: '1rem' }} justify={'center'}>
          <Space direction={'vertical'}>
            <Button type="primary" icon={<IconSearch />} onClick={() => props.onSubmit(form.getFieldsValue())}>
              {t['button.search']}
            </Button>
            <Button icon={<IconRefresh />} onClick={() => {
              form.resetFields();
              props.onReset();
            }}>
              {t['button.reset']}
            </Button>
          </Space>
        </Row>
      </Row>
    </Form>
  );
};
const DeviceDrawer = (props: {
  record?: DeviceResponse;
  visible: boolean;
  toggleVisible: (v: boolean) => void;
  mode: EditMode;
  onFinish: () => void;
}) => {
  const t = useLocale(locale);
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [typeOptions, setTypeOptions] = useState([]);
  const [modelOptions, setModelOptions] = useState([]);
  const [structureOptions, setStructureOptions] = useState([]);
  const title = () => {
    switch (props.mode) {
      case EditMode.Create:
        return t['title.create'];
      case EditMode.Update:
        return t['title.update'];
      default:
        return '';
    }
  };

  function onSubmitDrawer() {
    form.validate().then(() => {
      setConfirmLoading(true);
      instance
        .post(props.mode === EditMode.Create ? '/api/device/create' : '/api/device/update', form.getFields())
        .then((res) => {
          if (res.data.code === 200) {
            // 刷新页面数据
            Notification.success({
              title: res.data.message,
              content: ''
            });
            props.onFinish();
          } else {
            Notification.error({
              title: res.data.message,
              content: res.data.data
            });
          }
        })
        .finally(() => {
          form.resetFields();
          setConfirmLoading(false);
          props.toggleVisible(false);
        });
    });
  }

  function onCancelDrawer() {
    props.toggleVisible(false);
  }

  function fetchTypeData() {
    instance
      .post('/api/dict/list', {
        query: {
          type: 'DEVICE_TYPE'
        }
      })
      .then((res) => {
        if (res.data.code === 200) {
          setTypeOptions(convertToSelectOptions(res.data.data));
        }
      });
  }

  function fetchModelData() {
    instance
      .post('/api/model/list', {})
      .then((res) => {
        if (res.data.code === 200) {
          setModelOptions(convertToSelectOptions(res.data.data));
        }
      });
  }

  function fetchStructureData() {
    instance
      .post('/api/structure/list', {})
      .then((res) => {
        if (res.data.code === 200) {
          setStructureOptions(convertToSelectOptions(res.data.data));
        }
      });
  }

  function fillFormData() {
    form.resetFields();
    switch (props.mode) {
      case EditMode.Update:
        form.setFieldsValue(props.record);
        form.setFieldValue('enabled', props.record?.enabled + '' || 'false');
        form.setFieldValue('modelId', props.record?.model?.id);
        form.setFieldValue('structureId', props.record?.structure?.id);
        break;
      case EditMode.Create:
        form.setFieldValue('enabled', 'true');
        break;
    }
  }

  useEffect(() => {
    fetchTypeData();
    fetchModelData();
    fetchStructureData();
    fillFormData();
  }, [props.record, props.mode]);

  return (
    <Drawer
      width={defaultDrawerWidth}
      title={<span>{title()}</span>}
      visible={props.visible}
      confirmLoading={confirmLoading}
      onOk={onSubmitDrawer}
      onCancel={onCancelDrawer}
    >
      <Form {...defaultDrawerLayout} form={form} layout="vertical">
        <Form.Item label={t['label.name']} required field="name" rules={[{ required: true }]}>
          <Input placeholder={t['placeholder.name']} />
        </Form.Item>
        <Form.Item label={t['label.code']} required field="code" rules={[{ required: true }]}>
          <Input placeholder={t['placeholder.code']} />
        </Form.Item>
        <Form.Item label={t['label.type']} field="typeId" rules={[{ required: false }]}>
          <TreeSelect placeholder={t['placeholder.type']} treeData={typeOptions} />
        </Form.Item>
        <Form.Item label={t['label.model']} field="modelId" rules={[{ required: false }]}>
          <TreeSelect placeholder={t['placeholder.model']} treeData={modelOptions} />
        </Form.Item>
        <Form.Item label={t['label.structure']} field="structureId" rules={[{ required: false }]}>
          <TreeSelect placeholder={t['placeholder.structure']} treeData={structureOptions} />
        </Form.Item>
        <Form.Item label={t['label.enabled']} field="enabled" rules={[{ required: true }]}>
          <Select placeholder={t['placeholder.enabled']} defaultValue={'true'} options={EnabledOptions} />
        </Form.Item>
        <Form.Item label={t['label.remark']} field="remark" rules={[{ required: false }]}>
          <Input.TextArea placeholder={t['placeholder.remark']} />
        </Form.Item>
      </Form>
    </Drawer>
  );
};

const DevicePage = () => {
  const t = useLocale(locale);
  const history = useHistory();
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState<PaginationProps>(defaultPaginationProps);
  const [loading, setLoading] = useState(true);
  const [formParams, setFormParams] = useState({});
  const [visible, setVisible] = useState(false);
  const [editMode, setEditMode] = useState(EditMode.Create);
  const [selectRecord, setSelectRecord] = useState<DeviceResponse>();
  const [current, setCurrent] = useState(1);
  const [showAutoConfigModal, setShowAutoConfigModal] = useState(false);
  const [form] = Form.useForm();
  const [currentRecordForm] = Form.useForm();
  useEffect(() => {
    fetchData();
  }, [pagination.current, pagination.pageSize, formParams]);

  function fetchData() {
    const { current, pageSize } = pagination;
    setLoading(true);
    instance
      .post('/api/device/page', {
        pager: {
          pageNumber: current,
          pageSize
        },
        query: {
          ...formParams
        }
      })
      .then((res) => {
        setData(res.data.data);
        setPagination({
          ...pagination,
          current,
          pageSize,
          total: res.data.total
        });
        setLoading(false);
      });
  }

  function fetchDeviceExistParameterData(record: DeviceResponse) {
    instance
      .post('/api/device/detectParameters', {
        id: record.id
      })
      .then((res) => {
        if (res.data.code === 200) {
          const parameters = [];
          for (const dataKey in (res.data.data)) {
            parameters.push({
              name: dataKey,
              code: dataKey,
              common: false,
              dataType: res.data.data[dataKey],
              valueType: 'ACCUMULATED',
              enabled: 'true',
              remark: ''
            });
          }
          form.setFieldValue('parameters', parameters);
          setShowAutoConfigModal(true);
        } else {
          Notification.error({
            title: res.data.message,
            content: res.data.data
          });
        }
      });
  }

  function onDeleteRecord(id: number) {
    setLoading(true);
    instance
      .post('/api/device/delete', { id: id })
      .then((res) => {
        if (res.data.code === 200) {
          Notification.success({
            title: res.data.message,
            content: ''
          });
        } else {
          Notification.error({
            title: res.data.message,
            content: res.data.data
          });
        }
      })
      .finally(() => {
        setLoading(false);
        fetchData();
      });
  }

  function onCreateRecord(record: DeviceResponse) {
    setSelectRecord(record);
    setEditMode(EditMode.Create);
    setVisible(true);
  }

  function onUpdateRecord(record: DeviceResponse) {
    setSelectRecord(record);
    setEditMode(EditMode.Update);
    setVisible(true);
  }

  function onAutoConfig(record: DeviceResponse) {
    form.resetFields();
    currentRecordForm.resetFields();
    currentRecordForm.setFieldValue('id', record.id);
    form.setFieldValue('name', `${record.name}的物模型`);
    form.setFieldValue('code', `${record.code}_private_model`);
    form.setFieldValue('enabled', 'true');
    form.setFieldValue('remark', `根据设备${record.name}上报参数自动创建模型`);
    fetchDeviceExistParameterData(record);
  }

  function onNextPrev() {
    if (current == 1) {
    } else {
      form.validate().then(() => {
        setCurrent(current - 1);
      });
    }
  }

  function onNextStep() {
    if (current == 3) {
    } else {
      form.validate().then(() => {
        setCurrent(current + 1);
      });
    }
  }

  function onSubmitAutoConfig() {
    // 第一步，创建物模型
    form.validate().then(() => {
      const data = form.getFields();
      instance
        .post('/api/model/create', data)
        .then((res) => {
          if (res.data.code === 200) {
            currentRecordForm.setFieldValue('modelId', res.data.data.id);
            instance
              .post('/api/device/update', currentRecordForm.getFields())
              .then((res) => {
                if (res.data.code === 200) {
                  // 刷新页面数据
                  Notification.success({
                    title: res.data.message,
                    content: ''
                  });
                } else {
                  Notification.error({
                    title: res.data.message,
                    content: res.data.data
                  });
                }
              });
          } else {
            Notification.error({
              title: res.data.message,
              content: res.data.data
            });
          }
        })
        .finally(() => {
          setShowAutoConfigModal(false);
        });
    });
  }

  return (
    <Card>
      <SearchForm onSubmit={it => setFormParams(it)} onReset={() => setFormParams({})} />
      <Row justify={'space-between'}>
        <Space>
          <Button type="primary" icon={<IconPlus />} onClick={() => onCreateRecord(null)}>
            {t['button.create']}
          </Button>
        </Space>
      </Row>
      <Table
        style={{ marginTop: '1rem' }}
        rowKey={record => record.id}
        loading={loading}
        onChange={({ current, pageSize }) => setPagination({ ...pagination, current, pageSize })}
        pagination={pagination}
        columns={[
          {
            title: t['columns.id'],
            dataIndex: 'id'
          },
          {
            title: t['columns.name'],
            dataIndex: 'name'
          },
          {
            title: t['columns.code'],
            dataIndex: 'code'
          },
          {
            title: t['columns.type'],
            dataIndex: 'type',
            render: (value: DictResponse) => value?.name || '-'
          },
          {
            title: t['columns.model'],
            dataIndex: 'model',
            render: (value: ModelResponse) => value?.name || '-'
          },
          {
            title: t['columns.structure'],
            dataIndex: 'structure',
            render: (value: StructureResponse) => value?.name || '-'
          },
          {
            title: t['columns.enabled'],
            dataIndex: 'enabled',
            render: (value: boolean) => {
              return value === true
                ? <Badge status="success" text={resolveEnabledName(value)}></Badge>
                : <Badge status="error" text={resolveEnabledName(value)}></Badge>;
            }
          },
          {
            title: t['columns.remark'],
            dataIndex: 'remark',
            render: (value: string) => value || '-'
          },
          {
            title: t['columns.operations'],
            dataIndex: 'operations',
            headerCellStyle: { paddingLeft: '15px' },
            render: (_: null, record: DeviceResponse) => (
              [
                <Space size={12} key={'space_' + record.id}>
                  <Popconfirm
                    key={'auto_config_' + record.id}
                    focusLock
                    title={t['button.auto_config.confirm']}
                    content={!!record.model ? t['button.auto_config_exist'] : t['button.auto_config_not_exist']}
                    onOk={() => onAutoConfig(record)}>
                    <Tooltip content={t['button.auto_config']}>
                      <IconRobot key={'auto_config_' + record.id} />
                    </Tooltip>
                  </Popconfirm>
                  <Tooltip content={t['button.update']}>
                    <IconEdit key={'update_' + record.id}
                              onClick={() => onUpdateRecord(record)} />
                  </Tooltip>
                  <Tooltip content={t['button.config.alarm']}>
                    <IconTool style={{}} key={'config_alarm_' + record.id}
                              onClick={() => history.push('/equipment/device/alarm_config?id=' + record.id, {})} />
                  </Tooltip>
                  <Tooltip content={t['button.config.oee']}>
                    <IconCommon style={{}} key={'config_oee_' + record.id}
                                onClick={() => history.push('/equipment/device/oee_config?id=' + record.id, {})} />
                  </Tooltip>
                  <Tooltip content={t['button.config.utilization']}>
                    <IconThunderbolt style={{}} key={'config_utilization_' + record.id}
                                     onClick={() => history.push('/equipment/device/utilization_config?id=' + record.id, {})} />
                  </Tooltip>
                  <Popconfirm
                    key={'delete_' + record.id}
                    focusLock
                    title="确认删除"
                    content="删除后将不可恢复！"
                    onOk={() => onDeleteRecord(record.id)}>
                    <Tooltip content={t['button.delete']}>
                      <IconDelete style={{ color: 'red' }} key={'delete_' + record.id} />
                    </Tooltip>
                  </Popconfirm>
                </Space>
              ]
            )
          }
        ]}
        data={data}
      />
      <DeviceDrawer visible={visible} toggleVisible={setVisible}
                    mode={editMode} record={selectRecord} onFinish={fetchData} />
      <Modal title={t['button.auto_config']} visible={showAutoConfigModal} footer={null} closable
             onCancel={() => setShowAutoConfigModal(false)} style={{ width: '50vw' }}>
        <Card>
          <Row justify={'center'}>
            <Steps current={current} size={'small'} style={{ width: '50%', margin: '0 auto' }}>
              <Steps.Step
                title={t['stepForm.model.title']}
              />
              <Steps.Step
                title={t['stepForm.parameter.title']}
              />
            </Steps>
          </Row>
          <Form form={form} style={{ marginTop: '1rem' }}>
            <Row style={{ marginTop: '1rem' }}>
              {current === 1 && (
                <Row>
                  <Form.Item noStyle>
                    <Form.Item label={t['label.name']} required field="name" rules={[{ required: true }]}>
                      <Input placeholder={t['placeholder.name']} />
                    </Form.Item>
                    <Form.Item label={t['label.code']} required field="code" rules={[{ required: true }]}>
                      <Input placeholder={t['placeholder.code']} />
                    </Form.Item>
                    <Form.Item label={t['label.enabled']} field="enabled" rules={[{ required: true }]}>
                      <Select placeholder={t['placeholder.enabled']} options={EnabledOptions} />
                    </Form.Item>
                    <Form.Item label={t['label.remark']} field="remark" rules={[{ required: false }]}>
                      <Input.TextArea placeholder={t['placeholder.remark']} />
                    </Form.Item>
                  </Form.Item>
                </Row>
              )}
              {current === 2 && (
                <Row>
                  <Row style={{ width: '100%' }} gutter={6}>
                    <Col span={4}>
                      <Typography.Title heading={6}>
                        {t['label.parameter.name']}
                      </Typography.Title>
                    </Col>
                    <Col span={4}>
                      <Typography.Title heading={6}>
                        {t['label.parameter.code']}
                      </Typography.Title>
                    </Col>
                    <Col span={3}>
                      <Typography.Title heading={6}>
                        {t['label.parameter.dataType']}
                      </Typography.Title>
                    </Col>
                    <Col span={3}>
                      <Typography.Title heading={6}>
                        {t['label.parameter.valueType']}
                      </Typography.Title>
                    </Col>
                    <Col span={4}>
                      <Typography.Title heading={6}>
                        {t['label.parameter.abilities']}
                      </Typography.Title>
                    </Col>
                    <Col span={4}>
                      <Typography.Title heading={6}>
                        {t['label.parameter.unit']}
                      </Typography.Title>
                    </Col>
                    <Col span={2}>
                      <Typography.Title heading={6}>
                        {t['label.parameter.enabled']}
                      </Typography.Title>
                    </Col>
                  </Row>
                  <Row style={{ maxHeight: '20rem', overflowY: 'scroll' }}>
                    <Form.List noStyle rules={[{ required: false }]} field="parameters">
                      {(fields, { add }) => {
                        return (
                          <>
                            {
                              fields.map((item, index) => {
                                return (
                                  <Row key={'row_parameter_' + index} style={{ width: '100%', marginTop: '5px' }}
                                       gutter={4}>
                                    <Col span={4}>
                                      <Form.Item noStyle field={item.field + '.name'} rules={[{ required: true }]}>
                                        <Input placeholder={t['label.parameter.name.placeholder']} />
                                      </Form.Item>
                                    </Col>
                                    <Col span={4}>
                                      <Form.Item noStyle required field={item.field + '.code'}
                                                 rules={[{ required: true }]}>
                                        <Input placeholder={t['label.parameter.code.placeholder']} />
                                      </Form.Item>
                                    </Col>
                                    <Col span={3}>
                                      <Form.Item noStyle field={item.field + '.dataType'}
                                                 rules={[{ required: true }]}>
                                        <Select placeholder={t['label.parameter.dataType.placeholder']}
                                                options={ParameterDataTypeOptions} />
                                      </Form.Item>
                                    </Col>
                                    <Col span={3}>
                                      <Form.Item noStyle field={item.field + '.valueType'}
                                                 rules={[{ required: true }]}>
                                        <Select placeholder={t['label.parameter.valueType.placeholder']}
                                                options={ParameterValueTypeOptions} />
                                      </Form.Item>
                                    </Col>
                                    <Col span={4}>
                                      <Form.Item noStyle field={item.field + '.abilities'}
                                                 rules={[{ required: false }]}>
                                        <TreeSelect placeholder={t['label.parameter.abilities.placeholder']}
                                                    treeData={ParameterAbilityOptions}
                                                    fieldNames={{ key: 'value', title: 'label' }} treeCheckable />
                                      </Form.Item>
                                    </Col>
                                    <Col span={4}>
                                      <Form.Item noStyle field={item.field + '.unit'}
                                                 rules={[{ required: false }]}>
                                        <Input placeholder={t['label.parameter.unit.placeholder']} />
                                      </Form.Item>
                                    </Col>
                                    <Col span={2}>
                                      <Form.Item noStyle field={item.field + '.enabled'}
                                                 rules={[{ required: false }]}>
                                        <Select placeholder={t['placeholder.enabled']}
                                                options={EnabledOptions} />
                                      </Form.Item>
                                    </Col>
                                  </Row>
                                );
                              })
                            }
                            <Button icon={<IconPlus />} style={{ width: '100%', marginTop: '5px' }}
                                    onClick={() => add()}>{t['label.parameter.private.add']}</Button>
                          </>
                        );
                      }}
                    </Form.List>
                  </Row>
                </Row>
              )}
            </Row>
            <Row justify={'center'} style={{ marginTop: '1rem' }}>
              <Form.Item noStyle label=" ">
                <Space>
                  {current > 1 && (
                    <Button onClick={onNextPrev}> {t['stepForm.prev']} </Button>
                  )}
                  {current < 2 && (
                    <Button type="primary" onClick={onNextStep}> {t['stepForm.next']} </Button>
                  )}
                  {current === 2 && (
                    <Button key="submit" type="primary" onClick={onSubmitAutoConfig}> {t['stepForm.submit']} </Button>
                  )}
                </Space>
              </Form.Item>
            </Row>
          </Form>
        </Card>
      </Modal>
    </Card>
  );
};

export default DevicePage;